<template>
  <a-drawer width="800px" title="商家详情" :open="true" @close="onClose" class="desc">
    <a-spin :spinning="loading">
      <template v-if="item">
        <a-descriptions title="基本信息" bordered size="small" :column="1">
          <a-descriptions-item label="名称">{{ item.name }}</a-descriptions-item>
          <a-descriptions-item label="地址">{{ item.province + item.city + item.district }}</a-descriptions-item>
          <a-descriptions-item label="联系人">{{ item.contactUser }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{ item.contactPhone }}</a-descriptions-item>
          <a-descriptions-item label="认证状态">{{ item.verified ? '已认证':'-' }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ item.remark }}</a-descriptions-item>
        </a-descriptions>
        <div class="h2 my">图片视频</div>
        <span v-if="fileList.length == 0"> 无 </span>
        <a-upload v-else accept="image/*,video/*" v-model:file-list="fileList" list-type="picture-card"
          :before-upload="() => false">
        </a-upload>       
      </template>
    </a-spin>
  </a-drawer>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { getStoreById } from '@/api/store'
import { getFile } from '@/api/att'

const props = defineProps(['id'])
const emit = defineEmits(['close'])


const item = ref(null)
const loading = ref(false)
const fileList = ref([])

onMounted(() => {
  parseProp()
})

watch(() => props.id, () => {
  parseProp()
})

const parseProp = async () => {
  if (props.id) {
    loading.value = true
    const res = await getStoreById(props.id)
    loading.value = false
    const it = res.data
    item.value = it

    if (it.medias && it.medias.length > 0) {
      fileList.value = it.medias.map(i => {
        return {
          id: i.id,
          mime: i.mime,
          name: i.name,
          size: i.fileSize,
          url: getFile(i.id)
        }
      })
    }
  }
}


const onClose = () => {
  emit('close')
}
</script>

<style lang="less" scoped></style>